﻿class Main extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            no: '',
            id: 0,
            counts: [],
            start: 1,
            pagesize: 15,
            keyword: "",
            sizelist: [
                '160',
                '165',
                '170',
                '175',
                '180',
                '185',
                '190',
                '195',
                '特体',
            ],
            pricelist:[
                '835',
                '610',
                '300',
            ],
            type: 0,
            state: 'ON',
            typehtml: [],
            statehtml: [],
            merchantName:'',
            chosefile:!1,

        };
    }

    formatlist(list) {
        var listitem = [], wulist = [];
        if (list.length > 0) {
            list.forEach((x, i) => {
                listitem.push(
                    <tr key={i}>
                        <td className="tconter" style={{ width: '50px', cursor: "pointer" }} >{x.batchNo}</td>
                        <td style={{ width: '120px' }}>{formatDate(new Date(x.createTime))}</td>
                        <td className="tconter">{getstausstr(x.status)}</td>
                        <td className="tconter">{parseFloat(Number(x.totalAmt)/100.0) }元</td>
                        <td className="tconter">{x.totalCount}</td>
                        <td className="tconter" style={{ fontSize: '9pt', cursor: "pointer" }}>{x.localFilepath}</td>
                        <td>
                            <div className="czbuttom">
                                {/* <span className="hovertxt" >请下载后保存至本地路径</span> */}
                                <p id='btn_download' onClick={this.download.bind(this, x.filePath)}>下载</p>
                                <p onClick={this.submit.bind(this, x.id)}>提交</p>
                                <p onClick={this.getdetail.bind(this, x)}>查询</p>
                            </div>
                        </td>
                    </tr>
                )
            });
        } else {
            wulist.push(
                <p className="wulist">暂无数据 !</p>
            )
        }
        this.setState({ listitem, list, originallist: list, wulist })
    }

    // getdetail(x,e){
    //     gzgetDetail(x.id,15,1,res=>{
    //         // res = JSON.parse(res)
    //         console.log(res,'getdetail--resres');
    //             if(res.data.return_code!='0'){
                    
    //                 showAlert($('.alertarea'), res.data.returnMsg, 'alsucc', 'warning')
    //                // alert(res.data.returnMsg)
    //             }else{
    //               //  console.log();
    //               if(res.data.datalist){
    //                   if(res.data.datalist.length>0){
    //                     localStorage.setItem('dlist', JSON.stringify( {list:res.data.datalist,x} ))
    //                     window.location.href='./detail.html'
    //                   }else{
    //                       alert('暂无数据')
    //                   }
    //               }else{
    //                 alert('暂无数据')
    //               }
                   

    //             }
    //     })

    // }



    // 编辑
    todetail(e) {
        window.location.href = "./addgood.html?id=" + e;

        // var { list } = this.state;
        // list.forEach(x => {
        //     if (x.id == e) {
        //         this.setState({ id: e, username: x.username, password: '' })
        //     }
        // });
    }
    changestate(i, e) {
        let that = this
        that.setState({ showloading: 'ON' })
        Goodssetstate(i, res => {
            if (res.issuccess == 1) {
                this.freshlist()
                alert("设置成功")
            } else {
                that.setState({ showloading: '' })
                alert(res.msg)
            }
        })
    }
    changestate1(id, e) {
        let that = this
        that.setState({ showloading: 'ON' })
        Goodssetindex(id, res => {
            if (res.issuccess == 1) {
                this.freshlist()
                alert("设置成功")
            } else {
                that.setState({ showloading: '' })
                alert(res.msg)
            }
        })
    }
    // 排序
    toorder(id) {
        let orders = prompt("请输入1-999的正整数，数字越大，排序越前")
        if (orders == "" || orders == null) {
            return;
        }
        if (isNaN(orders) || orders < 1 || orders > 999) {
            return;
        }
        orders = Math.floor(orders);
        setGoodsorders({ id, orders }, res => {
            if (res.issuccess == 1) {
                alert("设置成功");
                // this.flist(res.list);
                this.freshlist();
            }
        });
    }

    export(){

        let { } = this.state

        apply_getelist(res=>{ 
            if(res.issuccess==1){

            let str = '身份证号码,姓名,性别,手机号码,工作单位,人员类别,银行卡号,申请时间\n'
            //`${topname}\n${housename}\n产品类型,高,宽,深度,单价,数量,总价,单位,立面说明,门板材质/柜体材质\n`
            const jsonData = []
            let total = 0;
            let totalcount = 0;
            
            // <td className="tconter">{(Number(x.singleprice)* (((Number(x.height)* Number(x.width))/1000000).toFixed(2))).toFixed(2)}</td>
            res.list.forEach(x => {
                   str+= `${x.idcard},${x.name},${x.gender},${x.phone},${x.workplace},${x.worktype},${x.bankcard},${formatDate(new Date(x.updateDate))}\n`
            })
          
            let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
            let link = document.createElement("a");
            link.href = uri;
            link.download = "导出数据.csv";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
        })
    
    }


   

     getdata() {
        let { start,pagesize,keyword,size,price,cname,sshword} = this.state

        apply_getlist({start:start==0?0:start-1,pagesize},res=>{ 
            let {list,total} =res;
            // let cnamehtml = []
            // cnamehtml.push(<option value={''}>请选择</option>)
            if (start ==1 ) {
                let pagecount = Math.ceil(total / pagesize);
                this.setpager(pagecount, start);
                this.setState({ start })
            }
            this.setState({list,total})
        })

    }



    componentDidMount() {
        let sizehtml = [],pricehtml=[],{sizelist,pricelist} = this.state
        sizehtml.push(<option value={''}>请选择</option>)
        sizelist.forEach((x, i) => {
            sizehtml.push(
                <option key={i} value={x}>{x} </option>
            )
        })
        pricehtml.push(<option value={''}>请选择</option>)
        pricelist.forEach((x, i) => {
            pricehtml.push(
                <option key={i} value={x*100}>{x} </option>
            )
        })
        this.setState({sizehtml,pricehtml})
        this.getdata()


        $('.modal1').hide()
        // testdingcan(res=>{
        // })
         this.setState({ showloading: '' })
        // this.freshlist()

    }

    add(){
        let {totalAmt,totalCount,oldPath}=this.state,that = this;
        gzaddBatch(totalAmt,totalCount,oldPath,res=>{
            if(res.code=='0'){
              //  alert('新增成功！')
              showAlert($('.alertarea'), '新增成功！', 'alsucc', 'success')
                $('.modal1').hide()
                that.setState({listitem:[]},()=>{
                    this.freshlist()
                }) 
            }

        })

    }
    
    freshlist() {
        
         let { pagesize, start, no } = this.state
         list_getlist(pagesize,start,no,res=>{
             console.log(res,'resres');
            this.setState({ showloading: '' })
             if(res.data.total>0){
                 console.log('aaa');
                 //this.setState({total:res.data.total})
                 if (start == 1) {
                                let pagecount = Math.ceil(res.data.total / pagesize);
                                this.setpager(pagecount, start);
                                this.setState({ start, total: res.data.total })
                            }
                 this.formatlist(res.data.list);
                 $('#btn_download').hover(()=>{
                    console.log(111,'hhhh');
                },()=>{

                })
             }
         })
        // Goodsgetlist({ pagesize, start, keyword, type, state }, res => {
        //     this.setState({ showloading: '' })
        //     if (res.issuccess == 1) {
        //         if (start == 1) {
        //             let pagecount = Math.ceil(res.total / pagesize);
        //             this.setpager(pagecount, start);
        //             this.setState({ start, total: res.total })
        //         }
        //         this.formatlist(res.list);
        //     }
        // })

    }
    setpager(pagecount, start) {
        let counts = [];
        for (let i = 0; i < pagecount; i++) {
            counts.push(start + i)
        }
        this.setState({ counts, pagestart: 0 })
    }
    clickpage(e) {
        let { pagesize } = this.state 
        this.setState({ pagestart: e, start:e*pagesize+1 }, () => {
           this.getdata()
        })
        console.log(e,'eee');

        // if(start==e){
        //     start+=pagesize;
        // }else{
        //     start =start+ e*pagesize
        // }

        // this.setState({ pagestart: e, start }, () => {
        //    this.getdata()
        // })
    }
    setpage(e) {
        let { pagesize, start } = this.state
        pagesize = parseInt(e)
        start = 1
        this.setState({ pagesize, start }, () => {
            // 
            this.getdata() 
        })
    }
    inputchange(prop, e) {
        this.setState({ [prop]: e.target.value })
    }
    inputchange1(prop, id, e) {
        let that = this;
        if (prop == "state") {
            that.setState({ showloading: 'ON' })
            Shopsetstate(id, res => {
                if (res.issuccess == 1) {
                    alert("设置成功")
                    that.freshlist()
                } else {
                    that.setState({ showloading: '' })
                    alert(res.msg)
                }
            })
        } else if (prop == "isrecommend") {
            that.setState({ showloading: 'ON' })
            Shopsetrecommend(id, res => {
                if (res.issuccess == 1) {
                    alert("设置成功")
                    that.freshlist()
                } else {
                    that.setState({ showloading: '' })
                    alert(res.msg)
                }
            })
        }

    }
    search() {
        this.setState({start:1},()=>{
            this.getdata()
        })
    }
    closemodal(){
        $('.modal1').hide()
    }
   
    reset() {
        this.setState({ state: 'ON', no: '' }, () => {
            this.freshlist()
        })
    }
    selectchange(prop,e){
        this.setState({[prop]:e.target.value},()=>{
            this.search()
        })
    }

    filechange(e){
        var that = this;
        let reader = new FileReader();
        reader.onload = function (e) {
            const workbook = XLSX.read(e.target.result); // 从原始数据获取工作簿

            var first_sheet_name = workbook.SheetNames[0]; // 获得第一个工作表名称

            const worksheet = workbook.Sheets[first_sheet_name]; // 获取工作表

            let json= XLSX.utils.sheet_to_json(worksheet);
            console.log(worksheet,'worksheet'); // 读取并打印A1端元格数据
            console.log(json,'json'); // 读取并打印A1端元格数据

            if(json.length>0){
                let list =[]
                json.forEach(x=>{
                    list.push({
                        name:x['姓名']
                        ,idcard:x['身份证号码']
                        ,workplace:x['工作单位']
                        ,worktype:x['人员类别']
                        ,gender:x['性别']
                        ,phone:x['手机号码']

                    })
                        //身份证号码	姓名	性别	手机号码	工作单位	人员类别
                    })
                    let jsonstr = JSON.stringify(list)
                    test1(jsonstr,res=>{
                            if(res.issuccess){
                                that.getdata()
                            }
                    })
                    console.log(jsonstr,'jsonstr');
               // that.setState({list})
            }

        };
        reader.readAsArrayBuffer($('#file1')[0].files[0]);

    }

    del(id){
        
        var a = confirm('确定要删除吗?'),that = this
        if(a){
            删除审核记录(id,res=>{
                if(res.success==1){
                    that.getdata()
                }
            })
        }
    }

    tod(id){
        window.location.href='./applydetail.html?id='+id
    }

    render() {
        let { list, size,price,sizehtml,sshword,keyword,pricehtml, cname, cnamehtml,merchantName,price_835,price_610,price_300,STUDENTNUM,PAID } = this.state;

        return (
            <div className="breadLinebox">
                 <div class="alertarea" id='alsucc' >
    </div>
              

                <Loading hidden={this.state.showloading != 'ON'} />
                <p className="merchantName">{merchantName}</p>
                <div className='panel-default content_wrap'>
                    <div className="breadLine ">
                        
                        <div className="bbtn">
                        {/* <p className="button l" onClick={this.export.bind(this)} >导出</p> 
                        
                        <p className="button l" onClick={()=>{
                             $('#file1').click();
                        }} >导入表格</p>*/}

<p className="button l" onClick={this.export.bind(this)} >导出</p>

                        <p className="button l" onClick={
                            ()=>{
                                window.location.href='https://techcherry.cn/caiwuapi/temp/信息导入模板.xls'
                            }

                        } >下载模板</p>
                        </div>

                        <input type="file" id='file1' onChange={this.filechange.bind(this)} style={{ display: "none" }} />
                       
                    </div>
                   
                    
                    <div className="contentBox">

                        <table className="tab">
                            <thead>
                                <tr>
                                    <th className="tconter">申请时间</th>
                                    <th className="tconter">姓名</th>
                                    <th className="tconter">身份证号</th>
                                    <th className="tconter">手机号</th>
                                    <th className="tconter">状态</th>
                                    <th className="tconter">描述</th>
                                    <th className="tconter">完成时间</th>
                                    <th className="tconter">操作</th>
                                    {/* <th>是否新人专享</th>
                                    <th>是否会员专享</th> */}
                                </tr>
                            </thead>
                            <tbody>
                                {
                                list.map((x,i)=>{
                                    return(
                                              <tr key={i}>
                        <td style={{ width: '120px' }}>{formatDate(new Date(x.updateDate))}</td>
                        <td className="tconter">{x.name}</td>
                        <td className="tconter">{x.idcard}</td>
                        <td className="tconter">{x.phone}</td>
                        <td className="tconter">{x.state=='0'?'申请中':x.state=="1"?'已通过':'已驳回'}</td>
                        <td className="tconter">{x.reason||'-'}</td>
                        <td className="tconter">
                            { x.state==0?'-':x.state==1
                            ?formatDate(new Date(x.passdate))
                            :formatDate(new Date(x.refusedate))}</td>
                        <td className="tconter ps">
                       
                        <p style={{'text-decoration':'underline','cursor':"pointer"}}
                             onClick={this.tod.bind(this,x.id)}>详情</p>
                            <p style={{'color':'red','text-decoration':'underline','cursor':"pointer"}}
                             onClick={this.del.bind(this,x.id)}>删除</p>

                            {/* <p style={{'text-decoration':'underline','cursor':"pointer"}}
                             onClick={this.del.bind(this,x.id)}>同意</p>
                             <p style={{'text-decoration':'underline','cursor':"pointer"}}
                             onClick={this.del.bind(this,x.id)}>驳回</p>
                       */} 
                       </td> 
                       
                       
                    </tr>
                                    )
                                })
                                }
                            </tbody>
                        </table>
                        {this.state.wulist}
                        <div className="pagerbox">
                            <p>共{this.state.total}条</p>
                            <Pager counts={this.state.counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={this.state.pagestart} />
                        </div>
                    </div>
                   
                </div>
            </div>


        )


    }
}

ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            <LeftMenu code='apply' height='apply' />
            <Main />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)